<template lang="html">
    <div class="charge-add">
        <myHeader>
            <div class="submit">
                <span @click="addEventType">确定</span>
            </div>
        </myHeader>
        <div class="form-containner">
            <van-cell-group>
                <van-field
                    v-model="name"
                    required
                    clearable
                    label="店铺名字"
                    icon="question-o"
                    readonly
                    placeholder="请输入店铺名字"
                    @focus="getChargeType"
                />
            </van-cell-group>
            <div class="add-menu">
                <span>添加菜单</span>
                <span @click="addMenu">再来一个</span>
            </div>
            <van-cell-group>
                <van-field
                    center
                    clearable
                    label="购买菜单"
                    readonly
                    v-for="(item, index) in menuList"
                    @focus="getCurProduct(index)"
                    :key="index"
                    v-model="item.text"
                >
                    <div class="operator" slot="button">
                        <i class="iconfont icon-Add" @click="addProductCount(index)"></i>
                        <i class="iconfont icon-icon--" style="margin-left: .08rem;" @click="subProductCount(index)"></i>
                    </div>
                </van-field>
            </van-cell-group>
            <div class="upload-containner">
                <label for="" class="upload-label">照片</label>
                <upload @uploadOk="uploadOk"></upload>
            </div>
        </div>
        <popup-picker :show.sync="showChargeType" @on-change="selectedStore" :show-cell="false" title="选啊" :data="chargeTypeList" :columns="3" v-model='selectStore'></popup-picker>
        <popup-picker :show.sync="showProductSelect" @on-change="selectedMenu" :show-cell="false" title="选啊" :data="productColumns" :columns="1" v-model='selectMenu'></popup-picker>
        <!-- <van-popup v-model="showChargeType" position="bottom" @click-overlay="clickOther"> -->
            <!-- <van-picker :columns="columns" @change="onChange" :loading="pickerLoading" /> -->
            <!-- <picker :data='year7' :columns=3 v-model='year7Value' ref="picker1"></picker> -->
        <!-- </van-popup> -->
        <!-- <van-popup v-model="showProductSelect" position="bottom" @click-overlay="getCurProduct"> -->
            <!-- <van-picker :columns="productColumns" @change="onProductChange" /> -->
        <!-- </van-popup> -->
    </div>
</template>

<script>
import Field from 'vant/lib/field'
import CellGroup from 'vant/lib/cell-group'
// import Popup from 'vant/lib/popup'
// import Picker from 'vant/lib/picker'
import Upload from '@/components/base/upload'
import { PopupPicker } from 'vux'
export default {
    data(){
        return {
            name:'',
            showChargeType: false,
            curSelectType: '',
            chargeTypeList: [],
            selectChargeTypes: [],
            pickerLoading: false,
            storeList: [],
            //当前选择的店铺对象
            curStoreObj: {},
            curStoreProductList: [],
            showProductSelect: false,
            productColumns: [],
            menuList: [{}],
            curSelectMenu: '',
            productColumnsIndex: 0,
            selectStore: [],
            prefix: ['one', 'two', 'three'],
            selectMenu: []
        }
    },
    components: {
        vanField: Field,
        vanCellGroup: CellGroup,
        // vanPopup: Popup,
        // vanPicker: Picker,
        Upload,
        PopupPicker
    },
    methods: {
        //点击添加按钮处理方法
        addEventType(){
            if (this.curStoreObj['value']) {
                this.curStoreObj['id'] = this.curStoreObj.value.replace(this.prefix[2], '')
            }
            let reqData = {
                req: JSON.stringify(
                    {
                        store: this.curStoreObj,
                        menuList: this.menuList
                    }
                )
            }
            this.$api.post('/charge/add-charge', reqData).then(res => {
                this.$vux.toast.show({text: '添加成功！'})
                this.$router.go(-1)
            })
        },
        clickOther(){
            this.getChargeType()
        },
        onChange(picker, values){
            this.curSelectType = values[0]
            this.selectChargeTypes = values
        },
        //获取分类和商店列表的数据
        getChargeTypeList(){
            this.$api.get('/store/get-store-tree').then(res => {
                let oneTree = []
                for (let i = 0; i < res.length; i++) {
                    oneTree.push({
                        'name': res[i]['text'],
                        'value': this.prefix[0] + res[i]['id'],
                        'parent': 0
                    })
                    if (res[i]['children']) {
                        for (let j = 0; j < res[i]['children'].length; j++) {
                            oneTree.push({
                                'name': res[i]['children'][j]['text'],
                                'value': this.prefix[1] + res[i]['children'][j]['id'],
                                'parent': this.prefix[0] + res[i]['id']
                            })
                            if (res[i]['children'][j]['children']) {
                                for (let k = 0; k < res[i]['children'][j]['children'].length; k++) {
                                    oneTree.push({
                                        'name': res[i]['children'][j]['children'][k]['text'],
                                        'value': this.prefix[2] + res[i]['children'][j]['children'][k]['id'],
                                        'parent': this.prefix[1] + res[i]['children'][j]['id']
                                    })
                                }
                            }
                        }
                    }
                }
                console.log(oneTree)
                this.chargeTypeList = oneTree
            })
        },
        //选择店铺完成之后，将店铺名称设置到Input框中
        //获取店铺所有的商品
        getChargeType(){
            // if (this.showChargeType && this.selectChargeTypes[2]) {
            //     this.name = this.selectChargeTypes[2]
            //     this.storeList.map(item => {
            //         if (item.name === this.selectChargeTypes[2]) {
            //             //获取当前店铺的对象
            //             this.curStoreObj = item
            //             this.$api.get('/store/get-product-by-store-id', {
            //                 storeId: item.id
            //             }).then(res => {
            //                 this.curStoreProductList = res
            //                 this.productColumns = res.map(item => item.name)
            //                 console.log('productColumns', this.productColumns)
            //                 if(res[0]){
            //                     this.curSelectMenu = res[0]['name']
            //                 }
            //             })
            //         }
            //     })
            // }
            this.showChargeType = !this.showChargeType
        },
        getTypeIdByText(text){
            for (let i = 0; i < this.chargeTypeList.length; i++) {
                for (var j = 0; j < this.chargeTypeList[i]['children'].length; j++) {
                    if (this.chargeTypeList[i]['children'][j]['text'] === text) {
                        return this.chargeTypeList[i]['children'][j]['id']
                    }
                }
            }
            return 0
        },
        onProductChange(picker, value, index){
            this.curSelectMenu = value
        },
        //获取当前菜单的值
        getCurProduct(index){
            this.productColumnsIndex = index
            this.showProductSelect = !this.showProductSelect
        },
        addMenu(){
            this.menuList.push({})
        },
        addProductCount(index){
            this.menuList[index]['count']++
            this.menuList[index]['text'] =
                `${this.menuList[index].name}(${this.menuList[index].price}) x ${this.menuList[index].count}`
            let copyObj = this.$utils.deepClone(this.menuList[index])

            this.menuList.splice(index, 1, copyObj)
        },
        subProductCount(index){
            this.menuList[index]['count']++
        },
        uploadOk(path){
            this.curStoreObj['picture'] = path
        },
        //店铺选择完成
        selectedStore(value){
            let storeId = value[2]
            let curStoreObj = this.chargeTypeList.find(item => item.value === storeId)
            if (curStoreObj.name) {
                this.curStoreObj = curStoreObj
                this.name = curStoreObj.name
                this.$api.get('/store/get-product-by-store-id', {
                    storeId: this.curStoreObj.value.replace(this.prefix[2], '')
                }).then(res => {
                    this.curStoreProductList = res
                    this.productColumns = res.map(item => {
                        return {
                            name: item.name,
                            value: item.id
                        }
                    })
                    console.log('productColumns', this.productColumns)
                })
            }
        },
        //用户选择完成菜单
        selectedMenu(value){
            if (value.length) {
                value = value.pop()
                this.curSelectMenu = this.curStoreProductList.find(item => item.id === value)
                this.curSelectMenu.count = 1
                this.curSelectMenu.text = `${this.curSelectMenu.name}(${this.curSelectMenu.price}) x ${this.curSelectMenu.count}`
                this.$set(this.menuList, this.productColumnsIndex, this.curSelectMenu)
            }
        }
    },
    created(){
        this.getChargeTypeList()
    }
}
</script>

<style lang="scss" scoped>
    .charge-add{
        .form-containner{
            margin-top: .2rem;
        }
        .submit{
            font-size: .16rem;
            text-align: right;
            padding-right: .1rem;
        }
        .add-menu{
            display: flex;
            justify-content: space-between;
            padding: .1rem .15rem .1rem .15rem;
            margin-top: .1rem;
            // border-top: 1px solid #ebedf0;
            font-size: 14px;
            span:nth-child(2){
                color: #2292FF;
            }
        }
        .operator{
            .iconfont{
                font-size: 26px;
            }
            .iconfont:nth-child(1){
                color: #99f;
            }
            .iconfont:nth-child(2){
                color: red;
            }
        }
        .upload-containner{
            padding: 10px 15px;
            border: 1px solid #ebedf0;
            display: flex;
            .upload-label{
                font-size: .14rem;
                width: .9rem;
            }
        }
    }
</style>
